<template>
  <view class="container">
    <view class="task-info">
      <!-- 列表项 Start -->
      <!-- 任务未完成 -->
      <view v-for="(item, index) in unDoneTaskList" :key="index">
        <!-- 任务标题 -->
        <view v-if="item.unfinish.length > 0" class="task-date">
          {{ item.time | formatDate("yyyy-MM-dd") }}
        </view>
        <!-- 未完成任务列表 -->
        <view
          class="task-item"
          :class="{ 'edit-task': isShow }"
          v-for="(unfinish, serial) in item.unfinish"
          :key="unfinish.uuid"
          @click="checkTask(unfinish.uuid)"
          @longpress="longpress"
        >
          <view v-show="!isShow" class="item-left">
            <checkbox
              :value="unfinish.uuid"
              :checked="unfinish.w_status == 0 ? false : true"
              @click.stop="checkboxChange(1, unfinish.uuid, item.time)"
            />
          </view>
          <!-- 任务名称 -->
          <view class="item-center">
            <text>{{ unfinish.w_name }}</text>
            <text>{{ unfinish.w_label }}</text>
          </view>
          <!-- 任务时间 -->
          <view class="item-right">
            <text class="task-time">
              {{ unfinish.w_remind | formatDate("hh:mm") }}
            </text>
          </view>

          <!-- 编辑选择框 -->
          <view v-show="isShow" class="edit-check-box">
            <checkbox
              class="edit-checkbox"
              :checked="unfinish.isSelect"
              @click.stop="editCheck(index, serial, unfinish.listType)"
            />
          </view>
        </view>
      </view>
      <!-- 任务已完成 -->
      <view v-if="isShowDoneText" class="task-date"> 已完成 </view>
      <view v-for="(item, index) in doneTaskList" :key="index">
        <!-- 任务标题 -->
        <view v-if="item.finish.length > 0" class="task-date">
          {{ item.time | formatDate("yyyy-MM-dd") }}
        </view>
        <!-- 已完成任务列表 -->
        <view
          class="task-item"
          :class="{ 'edit-task': isShow }"
          v-for="(finish, serial) in item.finish"
          :key="finish.uuid"
          @click="checkTask(finish.uuid)"
          @longpress="longpress"
        >
          <view v-show="!isShow" class="item-left">
            <checkbox
              :value="finish.uuid"
              :checked="unfinish.w_status == 0 ? false : true"
              @click.stop="checkboxChange(0, finish.uuid, item.time)"
            />
          </view>
          <!-- 任务名称 -->
          <view class="item-center">
            <text>{{ finish.w_name }}</text>
            <text>{{ finish.w_label }}</text>
          </view>
          <!-- 任务时间 -->
          <view class="item-right">
            <text class="task-time">
              {{ finish.w_remind | formatDate("hh:mm") }}
            </text>
          </view>

          <!-- 编辑选择框 -->
          <view v-show="isShow" class="edit-check-box">
            <checkbox
              class="edit-checkbox"
              :checked="finish.isSelect"
              @click.stop="editCheck(index, serial, finish.listType)"
            />
          </view>
        </view>
      </view>
      <!-- 列表项 End -->
    </view>

    <!-- 底部模块 -->
    <view v-if="isShow" class="foot-box">
      <view class="foot-item" @click="moveTask">
        <span class="foot-icon move-icon"></span>
        <span>移到</span>
      </view>
      <view class="foot-item" @click="showConfirm">
        <span class="foot-icon delete-icon"></span>
        <span>删除</span>
      </view>
      <view class="foot-item" @click="selectAll">
        <span class="foot-icon select-icon"></span>
        <span>全选</span>
      </view>
    </view>

    <!-- 是否确认 -->
    <view v-show="isShowConfirm" class="confirm-box">
      <view class="confirm-info">
        <view class="confirm-head">是否删除此待办？</view>
        <view class="confirm-body">
          <span @click="closeConfirm">取消</span>
          <span @click="deleteTask">删除</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    taskList: {
      type: Array,
      default: [],
    },
    // 是否确定删除
    isShowConfirm: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      isShow: false, // 长按显示
      isShowDoneText: false, // 是否显示已完成文字
    };
  },
  computed: {
    // 未完成的任务
    unDoneTaskList() {
      let unDoneTaskList = [];
      this.taskList.forEach(item => {
        if (!item.unfinish) item.unfinish = [];
        if (!item.finish) item.finish = [];

        let obj = {
          time: item.time,
          arr1: item.unfinish.filter(item => item.w_status == 0),
          arr2: item.finish.filter(item => item.w_status == 0),
        };
        obj.unfinish = [...obj.arr1, ...obj.arr2];
        unDoneTaskList.push(obj);
      });
      return unDoneTaskList;
    },
    // 已完成的任务
    doneTaskList() {
      let doneTaskList = [];
      this.taskList.forEach(item => {
        if (!item.unfinish) item.unfinish = [];
        if (!item.finish) item.finish = [];

        let obj = {
          time: item.time,
          arr1: item.unfinish.filter(item => item.w_status == 1),
          arr2: item.finish.filter(item => item.w_status == 1),
        };
        obj.finish = [...obj.arr1, ...obj.arr2];
        doneTaskList.push(obj);
      });

      let flag = false;
      for (let i = 0; i < doneTaskList.length; i++) {
        if (flag == false)
          flag = doneTaskList[i].finish.length > 0 ? true : false;
      }
      // 是否显示已完成文字
      this.isShowDoneText = flag;
      return doneTaskList;
    },
  },
  watch: {},
  methods: {
    // 任务状态事件
    checkboxChange(status, uuid, taskTime) {
      let params = {
        status,
        uuid,
        taskTime,
      };
      this.$emit("checkboxChange", params);
    },
    // 任务项长按事件
    longpress() {
      this.isShow = !this.isShow;
    },
    // 移动
    moveTask() {
      this.$emit("moveTask");
    },
    // 全选
    selectAll() {
      this.$emit("selectAll");
    },
    // 编辑选中 index:日期索引  serial：日期下的任务项索引 taskState：任务状态
    editCheck(index, serial, taskType) {
      let params = { index, serial, taskType };
      this.$emit("editCheck", params);
    },
    // 删除待办
    deleteTask() {
      this.$emit("deleteTask");
    },
    // 查看任务
    checkTask(uuid) {
      this.$emit("checkTask", uuid);
    },
    // 显示是否确认
    showConfirm() {
      this.$emit("showConfirm");
    },
    // 关闭是否确认
    closeConfirm() {
      this.$emit("closeConfirm");
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.task-info {
  margin-top: 10rpx;
  padding: 0 30rpx;

  .task-date {
    padding: 20rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .task-item {
    display: flex;
    position: relative;
    margin-bottom: 20rpx;
    padding: 30rpx 20rpx 30rpx 0;
    background-color: #fff;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 12rpx;
      height: 40rpx;
      background-color: #666ee8;
    }

    .item-left {
      width: 10%;

      & > checkbox {
        position: absolute;
        top: 50%;
        left: 4%;
        transform: translateY(-50%);
      }
    }

    .item-center {
      display: flex;
      padding: 0 20rpx;
      flex-direction: column;
      width: 466rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;

      & text:first-child {
        color: #333333;
      }

      & text:last-child {
        font-size: 24rpx;
        color: #cccccc;
      }
    }

    .item-right {
      position: relative;

      .task-time {
        position: absolute;
        top: 0;
        height: 48rpx;
        padding: 8rpx 20rpx;
        line-height: 32rpx;
        background-color: #f2f2f2;
        border-radius: 24rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }

  .edit-task {
    width: 90%;
    padding-left: 20rpx;

    .edit-check-box {
      position: absolute;
      top: 50%;
      right: -10%;
      width: 10%;
      transform: translateY(-50%);
      text-align: right;
    }
  }
}

// 底部模块
.foot-box {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;

  .foot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    padding: 10rpx 0;

    .foot-icon {
      width: 36rpx;
      height: 36rpx;
      background-repeat: no-repeat;
      background-size: cover;
    }

    & span:last-child {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #333333;
    }
  }

  .move-icon {
    background-image: url("../../static/move (2).png");
  }

  .delete-icon {
    background-image: url("../../static/delete (2).png");
  }

  .select-icon {
    background-image: url("../../static/select-all.png");
  }
}

// 提示框
.tip-box {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 38rpx 104rpx;
  background-color: #333;
  border-radius: 8rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: white;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0.8;
}

// 是否确认
.confirm-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;

  .confirm-info {
    position: absolute;
    left: 0;
    bottom: 30rpx;
    width: 92%;
    margin: 0 4%;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 8rpx;

    .confirm-head {
      color: #333;
      font-size: 28rpx;
      text-align: center;
    }

    .confirm-body {
      position: relative;
      margin-top: 40rpx;

      &::before {
        content: "";
        position: absolute;
        top: 2rpx;
        left: 50%;
        width: 2rpx;
        height: 48rpx;
        background-color: #cccccc;
        transform: translateX(-50%);
      }

      & span {
        display: inline-block;
        width: 50%;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;
        font-size: 28rpx;
        color: #999999;
      }

      & span:last-child {
        color: #ff6262;
      }
    }
  }
}
</style>
